.main-row{
  border: solid 0.01rem #3696c2;
  -webkit-box-shadow: 0 0 20px 0px inset rgba(68,199,244,0.3);
  box-shadow: 0 0 20px 0px inset rgba(68,199,244,0.3);
  background-color: #1c2961;
  // height: 9.03rem;
  // padding: 0.2rem 0.2rem;
  }
.main-box{
  //border: 1px solid #fff;
  height: calc(10.9rem - 4.34rem);
  }
.main-nav{
  display:flex
  background: #1E3385
  border-bottom: 1px solid #fff
  height: 0.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.2rem;
  position: relative;
  }
.main-title{
  font-size: 0.16rem;
  display: flex;
    align-items: center;
  }
.nav-btn{
  padding: 10px 15px;
  font-size: 17px;
  }
::v-deep.nav-radio{
  color:#fff
  margin-right: 0.3rem;
  .el-radio__label {
    font-size: 0.16rem
    padding-left: 0.05rem;
    }
  }
.statistics-row{
  margin-top: 0.3rem
      display: flex;
          padding: 0 0.1rem 0.1rem;
    justify-content: space-between;}
.ranking-row{
    display:flex
    align-items: center;
    justify-content: space-between;
    width: 60%;}
    .ranktable .table-header{
      font-size: 0.15rem
      }
>>>.ranktable.el-table td{
       padding:0.05rem 0
       max-width:0.2rem}
    
.ranking-box{
  border: 1px solid #fff;
  // width:calc((100% - 1rem - 40px) / 5)
  }
  .ranktitle {
    width: 0.7rem;
    text-align: center;
    height: 1.79rem;
  position: relative;
    word-wrap: break-word;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 0.2rem;
    flex-direction: column;
    justify-content: flex-start;
    display: flex;
}
.ranking-title{
  font-size: 0.18rem
  border-bottom: 1px solid #fff
  padding: 0 0.07rem
  line-height: 2;
  color:#e59319;
  background: #1E3385;
    display: flex;
        justify-content: space-between;
}
>>>.ranktitle-type-btn {
 margin-left: 0;
    margin-bottom: 0;
    border-radius: 0;
    width: 100%;
    border: 0;
    font-size: 0.14rem;
    border-bottom: 1px solid #dcdfe6;
    padding: 0.12rem 0.2rem !important;
}
@media screen and (max-width: 1440px){
  >>>.ranktitle-type-btn.el-button{
       padding: 0.10rem 0.1rem!important;
  }
  }
>>>.ranking-box .el-table{
  font-size: 0.14rem}
  >>>.ranking-box .el-table .cell{
      padding-left: 0.1rem;
          line-height: 0.23rem;
    padding-right: 0.1rem;}
  .ranking-name{
    width: 0.24rem;
        margin: 0 auto;
    height: 0.24rem;
    vertical-align: bottom;
    line-height: 0.24rem;
    text-align: center;
    font-size: 0.15rem;
    border-radius: 50%;
    color: #fff;}
.Totalinformation-row{
  width:46%;
  display:flex;
 
  align-content: space-between;
  }
  .Totalinformation-title{
   background-color: #1e3385;
    border: 1px solid #fff;
    line-height: 0.25rem;
    width: 0.6rem;
    text-align: center;
    margin-left: 0.2rem;
    font-size: 0.2rem;}
  .Totalinformation-mian{
    
    align-content: space-between;
     display:flex;
  flex-wrap: wrap;}
.Totalinformation-box{
  background-color: #1e3385;
	border: solid 1px #ffffff;
  padding:0 0.2rem;
  display:flex;
  align-items: center;
  height: 0.8rem;
  justify-content: space-between;
  
  margin-left: 0.1rem;
  }
  
.Totalinformation-icon{
    display:flex;
    align-items: center;
        flex-direction: column;
  }
.Totalinformation-icon img{
  width:0.45rem;
  height:0.45rem;
  
  }
.Totalinformation-icon span{
  font-size: 0.16rem;
      color: #e59319;
    white-space: nowrap;
  }
.Totalinformation-infos {    text-align: right;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-end;}
.Totalinformation-infos .now{font-size: 0.23rem;     flex: 1;display:flex;align-items: flex-end;}

.Totalinformation-infos .all{margin-top:0.05rem;width: 100%;}
.Totalinformation-infos .all font{padding-left:5px}
.main-center{
  display:flex;
  padding-top: 0.3rem;
  flex-wrap: wrap;
      padding: 0.1rem 0.05rem;
  }
// .charge-box{
//   width: 85px;
//   height: 108px;
//   line-height: 1;
  
// 	// background-color: #660f0f;
// 	// box-shadow: -3px 4px 5px 0px rgba(28, 28, 28, 0.75);
// 	// border:7px solid  #660f0f;
//   // border-radius: 50%;
//   font-size: 34px;
//   text-align: center;
//   // line-height:65px;
//   // font-weight:bold;
//   margin:0 0.2rem 0.2rem}
.charge-box {
	// width: calc((100% - 1rem) / 10);
	// // height: 108px;
	// line-height: 1;
	// font-size: 14px;
	// text-align: left;
	// margin-left: 0.05rem;
	// box-sizing: border-box;
	// margin-bottom: 0.1rem;
	// margin-right: 0.05rem;
	// border-radius: 3px;
	// -webkit-box-shadow: 1px 1px 5px 0 rgb(0 0 0 / 50%), 0 3px 15px 0 rgba(30,144,255,0.4) inset;
	// box-shadow: 1px 1px 5px 0 rgb(0 0 0 / 50%), 0 3px 15px 0 rgba(30,144,255,0.4) inset;
	// border: solid 0.01rem #44c7f4;
  width: calc((100% - 1rem) / 10);
	// height: 108px;
	line-height: 1;
	font-size: 0.14rem;
	text-align: left;
	margin-left: 0.05rem;
	box-sizing: border-box;
	margin-bottom: 0.1rem;
	margin-right: 0.05rem;
	border-radius: 3px;
	-webkit-box-shadow: 1px 1px 5px 0 rgb(0 0 0 / 50%), 0 3px 15px 0 rgba(30,144,255,0.4) inset;
	box-shadow: 1px 1px 5px 0 rgb(0 0 0 / 50%), 0 3px 15px 0 rgba(30,144,255,0.4) inset;
	border: solid 0.01rem #44c7f4;
}

.charge-mainbox {
	display: flex
  position: relative;
	// padding: 10px 10px 0;
      padding: 0.1rem 0.1rem 0;
  align-items: flex-start;
  // height: 128px;
     height: 1.28rem;
	justify-content: space-between;
}
.charge-title i {
    height:0.15rem;

}
.charge-title svg {
    width: 0.15rem;
        height: 0.15rem;
}
// .charge-icon {
// 	position: absolute;
// 	display: flex
//          height: 117px;
//   flex-direction: column;
//     left: 0;
//     right: 0;
//       z-index:1
//     align-items: center;
//         opacity: 0.8;
// }
.charge-icon {
    position: absolute;
 
    display: flex;
 width: 0.9rem;
    flex-direction: column;
    left: 0;
    right: 0;
    z-index: 1;
   padding-top: 0.79rem;
    align-items: center;
    justify-content: flex-start;
    padding-left: 0.06rem;
}
.chargeing-infos{
  position:relative;
  z-index:2;
  }
.charge-infos{
  //  position:relative;
  z-index:2;
  }
.charge-icon img {
       width: 0.8rem;
    height: auto;
    top: 0.25rem;
    right: 0.03rem;
    position: absolute;
}
.chargeing-infos .charge-title {
    justify-content: flex-start;
}
.charge-numer {
 font-size: 0.23rem;
    font-weight: bold;
    display: block;
    padding-top: 0.02rem;
    text-align: center;
}
.chargeing-infos div:nth-of-type(1) span.charge-value {
    border: 1px solid #fbff00;
    padding: 0.02rem;
}
// .charge-numer {
//     font-size: 122px;
//     font-weight: bold;
//     padding-top: 3px;
//     top: -12px;
//     left: 0;
//     position: absolute;
//     text-align: center;
//     right: 0;
//     z-index: 1;
//     color: rgba(255,255,255,0.35);
// }
.fictitious-charge-box {
    position: absolute;
    right: 0.2rem;
    z-index: 2;
    bottom: 2.2rem;
    width: 4.5rem;
    background: #1c2961;
}
.fictitious-btn {
    position: absolute;
    left: 0px;
    bottom: 0.2rem;
    cursor: pointer;
    width: 0.3rem;
    background: #44c7f4;
    height: 0.3rem;
    text-align: right;
    z-index: 3;
    border-radius: 0 50% 50% 0;
    line-height: 0.3rem;
    font-size: 0.28rem;
}
.fictitious-charge-box .charge-title {
    height: 0.3rem;
    text-align: center;
}
.fictitious-charge-box .charge-mainbox {
    justify-content: flex-end;
    height: auto;
  
}

.fictitious-charge-box .charge-infos {
    padding-left: 0.29rem;
}
.charge-name {
    font-size: 0.15rem;
    padding-top: 0.03rem;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    max-width: 0.9rem;
    z-index: 2;
    display: block;
    text-overflow: ellipsis;
}
.charge-quickstatistics-titile{
  border-top: solid 0.01rem #44c7f4;
      text-align: center;
    font-size: 18px;
    padding-bottom: 8px;
   padding-top: 8px;
}
.charge-quickstatistics-row,.Totalinformation-infos-row{
       align-items: center;
    display: flex;
    padding-bottom: 10px;
    justify-content: space-evenly;
}
.charge-quickstatistics-box,.Totalinformation-infos-box{
  position:relative;
  font-size: 0.17rem;
  text-align: center;
}
.charge-quickstatistics-box div{
  margin-bottom: 0.1rem
}
.charge-quickstatistics-row span,.Totalinformation-infos-row span{
    height: 0.34rem;
    width: 1px;
    background-image: linear-gradient(0deg,rgba(197,240,255,0),#00beff,rgba(197,240,255,0)),linear-gradient(rgba(197,240,255,0),#00beff,rgba(197,240,255,0));
}
.charge-state{
  display: flex;
    flex-direction: column;
    position:relative
  }
//.charge-numer {
	//     position: absolute;
	//     top: 36px;
	//     left: 19px;
	//     font-size: 29px;
	//
	//}
.fictitious-zk-btn {
    width: 0.3rem;
    height: 0.4rem;
    line-height: 0.4rem;
    position: absolute;
    transition: width 1s;
    background: #3696c2;
    font-size: 28px;
    border-radius: 50% 0 0 50%;
    right: 0;
    cursor: pointer;
    bottom: 2.5rem;
}

.fictitious-zk-btn:hover {
    width: 0.6rem;
}
.charge-title {
	font-size: 0.14rem;
  justify-content: flex-start;
	display: flex;
	padding-bottom: 0.1rem;
	align-items: center;
}
.charge-value{
  color:#fbff00}
.charge-title span {
	margin-left: 0.05rem
}
span.state-text {
    font-size: 0.34rem;
}
.stateing{
  width: 0;
    position: absolute;
    height: 26px;
    left: 17px;
    top: 17px;
    background: #f4ea2a;
    -webkit-animation: stateingdom 7s infinite linear;
    animation: stateingdom 7s infinite linear;
}
@keyframes stateingdom {
  0%{
    width:0px}
  100% {
    width: 57px;
  }
}
.ranktitle-day{
       position: relative;
    display: flex;
        z-index: 2;
    cursor: pointer;
    flex-direction: column;
    height: 0.55rem;
    font-size: 0.27rem;
   color:#fbff00;
    justify-content: center;
 
    background: #1e3385;
    border: 1px solid #fff;
}

.ranktitle-day::before{
     content: '';
    display: block;
    position: absolute;
    width: 2px;
    height: 0.58rem;
    background: #fff;
    transform-origin: center left;
    transform: rotate(53deg);
    right: 0.32rem;
  }
  .noranktitleday:before{
  display:none}
  .ranktitle-text {
    border: 1px solid #fff;
    margin-top: 0.09rem;
    font-size: 0.2rem;
    background: #1e3385;
    padding: 0.07rem 0.16rem;
    line-height: 0.24rem;
}
.ranktitle-type-row {
   position: absolute;
    top: -0.25rem;
    z-index: 2;
    width: 100%;
    justify-content: flex-end;
    display: flex;
    align-items: flex-start;
  
    flex-direction: column;

}
.bentdong{ animation: topad 1s infinite linear;}
@keyframes topad {
  0%{
   top: -0.20rem;
    }
  50% { top:-0.23rem;
  }
  100% {
    top: -0.2rem;
  }
}

.ranktitle-btn{
  width: 100%;
    background: #44c7f4;
    border-radius: 3px 3px 0 0;
    cursor: pointer;
        height: 0.3rem;
  }
.screen-row{
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    width:43px;
        font-size: 17px
    transition: width 1s;
    }
    .screen-btn {
    background: #409eff;
    display: flex;
    align-items: center;
    border-radius: 3px;
    min-width: 0.43rem;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 0.4rem;
        font-size: 0.25rem;
    margin-right: 0.1rem;
}

>>>.screen-row .el-input__inner {
    background: #1E3385 !important;
    color: #f4ea2a;
    font-size:17px;
    border: 1px solid #44c7f4;
}
>>>.screen-row .sorttype1 .el-input__inner {
    background: #008600 !important;
    
}
>>>.screen-row .sorttype2 .el-input__inner {
    background: #910000 !important;
    
}
>>>.screen-row .sorttype3 .el-input__inner {
    background: #ac4200 !important;
    
}
>>>.screen-row .sorttype4 .el-input__inner {
    background: #84006e !important;
    
}
>>>.screen-row .currentsotrdesc .el-input__inner {
    background: #008600 !important;
    
}
>>>.screen-row .currentsotrasc .el-input__inner {
    background: #ac4200 !important;
    
}
.Highlighttext{
  color:#f4ea2a;
  font-weight: bold;
}
.charge-title span.Markerball {
	width: 0.15rem;
	border-radius: 50%;
	height: 0.15rem;
}
.fictitious-charge-box .charge-icon img {
    position: relative;
    top: 0;
}
.ChargingPointInformation-row{
    border: solid 0.01rem #3696c2;
    -webkit-box-shadow: 0 0 20px 0px inset rgba(68,199,244,0.3);
    box-shadow: 0 0 20px 0px inset rgba(68,199,244,0.3);
    background-color: #1c2961;
    // height: 1.03rem;
        z-index: 2;
    padding: 0.2rem 0.25rem;
    position: absolute;
    left:4rem;
    top: 1rem;
    width:7rem;
    padding:0.15rem
}
.tl-corner {
  position: absolute;
  width: 0.2rem;
  height: 0.2rem;
  left: -0.05rem;
  top: -0.05rem;
  border-top: 0.01rem solid #fff;
  border-left: 0.01rem solid #fff;
}

.tr-corner {
  width: 0.2rem;
  height: 0.2rem;
  position: absolute;
  right: -0.05rem;
  top: -0.05rem;
  border-top: 0.01rem solid #fff;
  border-right: 0.01rem solid #fff;
}

.bl-corner {
  width: 0.2rem;
  height: 0.2rem;
  position: absolute;
  left: -0.05rem;
  bottom: -0.05rem;
  border-bottom: 0.01rem solid #fff;
  border-left: 0.01rem solid #fff;
}

.br-corner {
  width: 0.2rem;
  height: 0.2rem;
  position: absolute;
  right: -0.05rem;
  bottom: -0.05rem;
  border-bottom: 0.01rem solid #fff;
  border-right: 0.01rem solid #fff;
}
.ChargingPointInformation-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #fff;
  padding:0 0.05rem 0.1rem;
  margin-bottom: 0.2rem
  }
.ChargingPointInformation-title{
  font-size: 0.18rem
}
.table-header{
  font-weight: 400;
  font-size: 0.17rem;
  }
.table-data{
  font-size: 0.16rem;
  }
.close-btn{
    font-size: 0.26rem;
    color: #fff;
    height: 39px;
    padding: 0;
    vertical-align: sub;
}
.ChargingPoint-info{
  position: absolute;
  width: 330px;
  border: solid 0.01rem #3696c2;
  -webkit-box-shadow: 0 0 20px 0px inset rgba(68,199,244,0.3);
    box-shadow: 0 0 20px 0px inset rgba(68,199,244,0,3);
    background-color: rgba(28,41,97,0.9);
  z-index:2;
  padding: 15px 20px 0;
      display: flex;
    justify-content: space-between;
}

.changstae {
    background: #098d00;

}

.ChargingPoint-info-box{
  }
.ChargingPoint-info-box span {
  display: inline-block;
  width: 70px;
  text-align: justify;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
    
}
.ChargingPoint-info-box span:after {
  content: '';
  width: 100%;
  display: inline-block;
}
.ChargingPoint-info-box > div{
  display: flex;
  padding-bottom: 8px;
  align-items: center;}
  .ChargingPoint-info-box font {
    line-height: 20px;
}
.ChargingPoint-info-box span.Markerball {
    width: 15px;
    border-radius: 50%;
    height: 15px;
    margin-left: 10px;
}
/*充电桩详细弹窗*/
.Charging-Details-fox{

    z-index: 3
}
.Charging-Details-row{
  border: solid 0.01rem #3696c2;
  -webkit-box-shadow: 0 0 20px 0px inset rgba(68,199,244,0.3);
  box-shadow: 0 0 20px 0px inset rgba(68,199,244,0.3);
  background-color: #1c2961;
  // height: 1.03rem;
  z-index: 4;
  position: absolute;
  left: 4rem;
  top: 1rem;
  // width:7rem;
  padding:0.05rem 0.15rem 0.15rem
}
.Charging-Details-fox:after{
      content: "";
    position: absolute;
    left: 0%;
    top: 0%;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.5)
    z-index:3}

.Charging-Details-nav{
  display: flex;
  height:50px
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #fff
  padding-left: 5px;
}
.Charging-Details-title{
  font-size: 25px
      display: flex;
    align-items: center;
}
.Charging-Details-title i{
   cursor: pointer;}
.Charging-Details-tab-row{
   display: flex;
   margin-top:10px
  }
.Charging-Details-btn{
  display: flex;
  align-items: center;
  font-size: 18px;
  background: #fff;
  line-height: 1;
  padding:10px 8px;
  border-radius: 5px;
  color:#409eff;
  margin-right: 12px;
  cursor:pointer
}
.Charging-Details-btn img {
    width: 20px;
    vertical-align: bottom;
    margin-right:5px
}
.Charging-Details-on{
  background: #409eff;
  color:#fff;
}
.Charging-Details-on img {
  filter: brightness(4)
}
.Charging-Details-workstate{
    padding-left:20px
    padding-top:20px

    div{
      padding-bottom:15px;
      display: flex;
      align-items: center;
    }
    font{
      color: #f3ff70;
      
    }
    i{
      display:inline-block;
      width: 15px;
      margin-left:10px
	    height: 15px;
      border-radius: 50%;
    }
  }
.allcdi-row{
  display: flex;
  justify-content:space-around;
  .allcdi-box{
    position:relative
    &:after{
      display: block;
      content: "";
      position: absolute;
      width: 1px;
      right: -7px;
      height: 60px;
      background: #fff;
      top: 10px;

    }
    &:last-child:after{
      display:none
    }
  }
  
  .allcdi-title{
    text-align: center
    padding-bottom: 10px
    }
  .allcdi-main{
     display: flex;
     justify-content:center;
     text-align: center
      div{
        padding:0 10px
      }
      span{
        margin-top:10px;
        display: inline-block;
      }
    }
}

>>>.el-table thead.is-group th {
    background: #1e3385;
}
>>>.heradclass{
  padding: 0
    height: 35px;}
>>>.heradleve2class{
  padding: 0;
    height: 35px;}
.sort-btn-row {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 11px;
    right: 305px;
}
.sort-btn-row i{
 cursor:pointer
}
.text {
    font-size: 30px;
   
    text-transform: uppercase;
    fill: none;
    /* stroke: #5cff09; */
  
    stroke-width: 1px;
    /* stroke-dasharray: 60 20; */
    stroke-dasharray:140 20;
    -webkit-animation: stroke 2s infinite linear;
    animation: stroke 3s infinite linear;
}
@keyframes stroke {
  100% {
    stroke-dashoffset: -150;
  }
}
//   .charge-box.no-state svg path{
//     fill: #A9A9A9;
  
// }
// .charge-box.longe svg path{
//    fill: #003900;
   
// }
// .timedanger svg path{
//    fill: #B04722
//  }
// .timenormal svg path{
//   fill: #FBA454
 

// }

// .kWhdanger svg path{
//   fill: #003900
 

// }
// .kWhwarning svg path{
//   fill: #027C02
  

// }
// .kWhnormal svg path{
//   fill: #14AC14
 

// }

// .powerFactordanger svg path{
//   fill: #5a004b
 

// }
// .powerFactorwarning svg path{
//   fill: #990880
  

// }
// .powerFactornormal svg path{
//   fill: #d10cb0
  

// }
>>>.Totalinformation-infos .now span {
    margin-top: 5px;
     margin-left: 10px;
}
>>>.Totalinformation-infos .now font {
      color: #eaff00;
    margin-left: 10px;
    
    padding: 0 5px;
    border-radius: 3px;
    background: linear-gradient(324deg, #18c318, #088300, #18c318), linear-gradient(#18c318, #088700, #18c318);
    box-shadow: -2px 1px 4px 0px rgba(26,26,26,0.86)
}
.Totalinformation-infos-box div{
  margin-bottom: 5px
}
.Totalinformation-infos-row > span{
  margin-left:10px
  margin-right: 10px
  }
 .Totalinformation-infos-row{
   justify-content:flex-end;
   padding-bottom:0
   }
.Charging-Details-title i {
   margin-right: 10px;
    height: 35px;
    border-radius: 5px;
    box-shadow: -2px 1px 7px 0px rgb(0 0 0);
    width: 35px;
    background: linear-gradient(324deg, #f35454, #a30000, #f35454), linear-gradient(#18c318, #088700, #18c318);
    justify-content: center;
    padding-top: 3px;
    padding-left: 3px;
    box-sizing: border-box;
}
.Charging-Details-title i svg {
    transform: scale(0.9);
    transition: all 0.5s;
}
.Charging-Details-title i:hover svg {
    transform: scale(1.1);
}
.state-statistics-row {
    border: solid 0.01rem #3696c2;
    -webkit-box-shadow: 0 0 20px 0px inset rgba(68,199,244,0.3);
    box-shadow: 0 0 20px 0px inset rgba(68,199,244,0.3);
    background-color: #1c2961;
    height: 0.5rem;
    margin-top: 0.1rem
        display: flex;
    padding: 0 0.1rem;
    align-items: center;
    font-size: 0.25rem;
}
.state-statistics-row div{
  margin-right: 0.15rem
}






